<!--
 * @Description: 折线图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: 卢金辉 3400170271@qq.com
 * @LastEditTime: 2025-09-25 15:20:52
-->
<template>
  <div style="height: 100%;">
    <div ref="image2" style="height: 200px;"></div>
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 100,
      },
      TData: [],
    };
  },
  computed: {},
  methods: {
    loadLine() {
      const dualAxes = new DualAxes(this.$refs.image2, {
        data: [this.TData, this.TData],
        xField: 'insert_time',
        yField: ['temperature', 'humidity'],
        xAxis: {
          label: {
            style: {
              fill: "#000",
              fontSize: 12,
            },
          },
        },
        yAxis: [
          {
            label: {
              style: {
                fill: "#000",
                fontSize: 13,
              },
            },
          },
          {
            label: {
              style: {
                fill: "#000",
                fontSize: 13,
              },
            },
          },
        ],
        geometryOptions: [
          {
            geometry: 'line',
            color: '#5B8FF9',
            name: 'temperature',
          },
          {
            geometry: 'line',
            color: '#5AD8A6',
            name: 'humidity',

          },
        ],
        legend: {
          position: 'top',
        },
        tooltip: {
          showMarkers: true,
          domStyles: {
            "g2-tooltip": {
              background: "#ececec",
              color: "#000",
              fontSize: 15,
            },
          },
        },

      });

      dualAxes.render();
    },
    async getProcessData() {
      let res = await get('/dashboard/pageQueryTodayData', this.params);
      // console.log(res, "获取响应");
      let temp = [];
      res.data.list.forEach((item, index, arr) => {
        // 由于刻度混乱 将第一条数据值设置为15.4
        arr[0].temperature = 15.4;
        arr[0].humidity = 43;
        item.insert_time = moment(item.insert_time).format('HH:mm');
        // 由于查询数据密度密集 需要将数据处理 每隔10条数据取一条数据
        if (index % 10 == 0) {
          temp.push(arr[index])
        }
      });
      this.TData = temp;
    },
  },
  created() { },
  async mounted() {
    await this.getProcessData();
    this.loadLine();
  },
};
</script>
<style scoped></style>